<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-25 18:26:33
 * @LastEditTime: 2022-04-25 21:41:45
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 13_高阶函数、函数柯里化
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>13_高阶函数、函数柯里化</title>
</head>

<body>
  <div id="test"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js">
  </script>
  <script src="../js/prop-types.js"></script>
  <script type="text/babel">
    /* 
       高阶函数:如果一个函数符合一下 2 个规范其中之一,那该函数就是高阶函数
         1.若 A 函数,接收的参数是一个函数,那么 A 就是高阶函数
         2.若 A 函数,调用的返回值依然是一个函数,那么 A 就是高阶函数
         常见的高阶函数:Promise、setTimeout、数组的迭代方法......
         
       函数柯里化:通过函数调用继续返回函数的的方式,实现多次接收参数的最后统一处理的函数编码形式。
    */
    class MyComponent extends React.Component {
      state = {
        username: '',
        password: ''
      }
      /* 
      // 柯里化实现
       saveFormData = (dataType) => {
         return (el) => {
           this.setState({ [dataType]: el.target.value })
         }
       } */
      //  不使用柯里化
      saveFormData = (dataType, e) => {
        e.preventDefault();
        this.setState({ [dataType]: e.target.value })
      }
      render() {
        return (
          <form action="">
            <label >
              {/*  用户名<input type="text" onChange={this.saveFormData('username')} /> */}
              用户名<input type="text" onChange={e => this.saveFormData('username', e)} />
            </label>
            <label>
              {/* 密码 <input type="password" onChange={this.saveFormData('password')} /> */}
              密码<input type="text" onChange={e => this.saveFormData('password', e)} />

            </label>
            <button>登录</button>
          </form>
        )
      }
    }
    ReactDOM.render(<div><MyComponent /></div>, document.querySelector('#test'))
  </script>
</body>

</html>